<script>
export default {
  name: 'TimeTable'
}
</script>

<template>
  <div class="time-table-container">
    <h2>时间表</h2>
    <el-button type="primary" @click="openDialog">添加事件</el-button>
    <el-table :data="events" style="width: 100%" class="event-table">
      <el-table-column prop="name" label="名称" width="150" />
      <el-table-column prop="time" label="时间" width="200" />
      <el-table-column prop="location" label="地点" width="150" />
      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <div class="action-buttons">
            <el-button type="primary" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" @click="openDeleteDialog(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加事件弹窗 -->
    <el-dialog title="添加事件" v-model="dialogVisible" width="500px">
      <el-form :model="newEvent">
        <el-form-item label="名称">
          <el-input v-model="newEvent.name" />
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="newEvent.time" />
        </el-form-item>
        <el-form-item label="地点">
          <el-input v-model="newEvent.location" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="newEvent.description" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addEvent">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑事件弹窗 -->
    <el-dialog title="编辑事件" v-model="editDialogVisible" width="500px">
      <el-form :model="editEvent">
        <el-form-item label="名称">
          <el-input v-model="editEvent.name" />
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="editEvent.time" />
        </el-form-item>
        <el-form-item label="地点">
          <el-input v-model="editEvent.location" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editEvent.description" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除事件弹窗 -->
    <el-dialog title="删除事件" v-model="deleteDialogVisible" width="400px">
      <span>确定删除该事件吗？</span>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="deleteEvent">删除</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const events = ref([
  { name: '课程1', time: '10:00 - 11:00', location: '教室A', description: '数学课' },
  { name: '会议', time: '14:00 - 15:00', location: '会议室B', description: '项目讨论' }
])

const dialogVisible = ref(false)
const editDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const newEvent = ref({ name: '', time: '', location: '', description: '' })
const editEvent = ref({})
const eventToDelete = ref(null)

const openDialog = () => {
  dialogVisible.value = true
}

const addEvent = () => {
  if (newEvent.value.name.trim()) {
    events.value.push({ ...newEvent.value })
    newEvent.value = { name: '', time: '', location: '', description: '' }
    dialogVisible.value = false
    console.log('事件添加成功')
  } else {
    console.log('名称不能为空')
  }
}

const openEditDialog = (event) => {
  editEvent.value = { ...event }
  editDialogVisible.value = true
}

const saveEdit = () => {
  const index = events.value.findIndex(e => e.name === editEvent.value.name)
  if (index !== -1) {
    events.value[index] = { ...editEvent.value }
    editDialogVisible.value = false
    console.log('事件信息更新成功')
  }
}

const openDeleteDialog = (event) => {
  eventToDelete.value = event
  deleteDialogVisible.value = true
}

const deleteEvent = () => {
  events.value = events.value.filter(e => e !== eventToDelete.value)
  deleteDialogVisible.value = false
  console.log('事件删除成功')
}
</script>

<style scoped>
.time-table-container {
  max-width: 800px;
  height: 400px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

h2 {
  margin-bottom: 20px;
}

.event-table {
  width: 100%;
}

.dialog-footer {
  text-align: right;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}
</style>
